<template>
  <page-header-wrapper>
    <a-card :bordered='false'>
      <!--搜索区域-->
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='48'>
            <a-col :md='8' :sm='24'>
              <a-form-item label='姓名'>
                <a-input v-model='queryParam.id' placeholder='请输入姓名或关键字' />
              </a-form-item>
            </a-col>
            <a-col :md='8' :sm='24'>
              <a-form-item label='录取状态'>
                <a-select v-model='queryParam.status' placeholder='请选择' default-value='2'>
                  <a-select-option value='0'>已录取</a-select-option>
                  <a-select-option value='1'>未录取</a-select-option>
                  <a-select-option value='2'>运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!--展开区域(高级搜索功能-->
            <template v-if='advanced'>
              <a-col :md='8' :sm='24'>
                <a-form-item label='招新做题分数'>
                  <a-input-number placeholder='请输入招新做题分数(分制)' :min='0' :max='100' v-model='queryParam.callNo'
                                  style='width: 100%' />
                </a-form-item>
              </a-col>
              <a-col :md='8' :sm='24'>
                <a-form-item label='学号'>
                  <a-input-number v-model='queryParam.callNo' placeholder='请输入学号(支持模糊查询)'
                                  style='width: 100%' />
                </a-form-item>
              </a-col>
              <a-col :md='8' :sm='24'>
                <a-form-item label='使用状态'>
                  <a-select placeholder='请选择' default-value='0'>
                    <a-select-option value='0'>全部</a-select-option>
                    <a-select-option value='1'>关闭</a-select-option>
                    <a-select-option value='2'>运行中</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md='8' :sm='24'>
                <a-form-item label='更新日期'>
                  <a-date-picker v-model='queryParam.date' style='width: 100%' placeholder='请输入更新日期' />
                </a-form-item>
              </a-col>
            </template>
            <a-col :md='!advanced && 8 || 24' :sm='24'>
              <span class='table-page-search-submitButtons'
                    :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
                <a-button style='margin-left: 8px' @click='() => this.queryParam = {}'>重置</a-button>
                <a @click='toggleAdvanced' style='margin-left: 8px'>
                  {{ advanced ? '收起' : '高级搜索' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <a-divider />
      <!--表格区域-->
      <a-table
        ref='table'
        size='default'
        rowKey='key'
        :columns='columns'
        :data-source='loadData'
        showPagination='auto'
      >
        <!--学号-->
        <span slot='studentId' slot-scope='studentId'>
          {{ studentId }}
        </span>
        <!--姓名-->
        <span slot='name' slot-scope='name'>
          {{ name }}
        </span>
        <!--分数-->
        <span slot='score' slot-scope='score'>
          {{ score }}
        </span>
        <!--录取状态-->
        <span slot='status' slot-scope='status'>
          <a-badge :status='status | statusTypeFilter' :text='status | statusFilter' />
        </span>
        <!--修改时间-->
        <span slot-scope='updatedTime' slot='updatedTime'>
          {{ updatedTime }}
        </span>
        <!--操作-->
        <span slot='action' slot-scope='text, record'>
          <template>
            <a @click='handleEdit(record)'>修改</a>
            <a-divider type='vertical' />
            <a @click='handleSub(record)'>一键录取</a>
          </template>
        </span>
      </a-table>
      <!--学生信息弹出框-->
      <form-model-dialog
        :student-id='studentId'
        :show-submit='showFormDialog' @setDialogStatus='setDialogStatus'></form-model-dialog>
      <!-- 确认一键录取 -->
      <a-modal
        title='确认录取'
        :visible='false'
        :confirm-loading='confirmLoadingEnroll'
        @ok='sureEnroll'
        @cancel='enrollCancel'
      >
        <p>是否确认录取 {{ currentStudent.name }}</p>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import FormModelDialog from '@/views/list/components/FormModelDialog.vue'

const columns = [
  {
    title: '学号',
    width: 200,
    dataIndex: 'studentId',
    scopedSlots: { customRender: 'studentId' }
  },
  {
    title: '姓名',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '分数',
    dataIndex: 'score',
    sorter: true,
    needTotal: true,
    customRender: (text) => text + ' 分'
  },
  {
    title: '录取状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '提交题目时间',
    dataIndex: 'updatedTime',
    sorter: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

const statusMap = {
  0: {
    status: 'default',
    text: '未知状态'
  },
  1: {
    status: 'processing',
    text: '进行中'
  },
  2: {
    status: 'success',
    text: '已录取'
  },
  3: {
    status: 'error',
    text: '未录取'
  }
}


export default {
  name: 'TableList',
  components: {
    FormModelDialog
  },
  data() {
    this.columns = columns
    return {
      // 创建表单
      studentId: '',
      showFormDialog: false, // 是否展示表单模型
      confirmLoading: false, // 按钮加载效果
      
      // 录取信息
      currentStudent: {
        studentId: '',
        name: ''
      },
      // 展示录取框
      showEnroll: false,
      confirmLoadingEnroll: false,
      
      // 高级搜索 展开/关闭
      advanced: true,
      // 查询参数
      queryParam: {},
      loadData: [
        {
          key: 1,
          studentId: '202210007548',
          name: '谢天浩',
          score: 100,
          status: 2,
          updatedTime: '2023-10-1 10:02'
        },
        {
          key: 2,
          studentId: '202210006666',
          name: '天天',
          score: 95,
          status: 2,
          updatedTime: '2023-10-1 10:02'
        },
        {
          key: 3,
          studentId: '202310001111',
          name: '浩浩',
          score: 98,
          status: 2,
          updatedTime: '2023-10-1 10:02'
        }
      ],
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    }
  },
  created() {
  },
  methods: {
    handleEdit(record) {
      // 将信息转递给弹出组件
      this.studentId = record.studentId
      this.showFormDialog = true
    },
    
    handleSub(record) {
      this.currentStudent.studentId = record.studentId
      this.currentStudent.name = record.name
      this.showEnroll = true
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    setDialogStatus(dialogStatus) {
      this.showFormDialog = dialogStatus
    },
    // 录取
    sureEnroll() {
      this.$message.success(`${this.currentStudent.studentId + '  ' + this.currentStudent.name} 录取成功`)
      this.resetEnroll()
    },
    enrollCancel() {
      this.resetEnroll()
    },
    resetEnroll() {
      this.showEnroll = false
      this.currentStudent = {}
    },
    
  }
}
</script>
